<template>
  <div>
    <zk-navbar :title="qrcodeName+titleText" customLeftClick @leftClick="navLeftClick" />
    <img class="qrcode-image" :src="qrcodeUrl" />
    <div class="qrcode-btn-wrap" v-if="(isFree==0||isFree==1)&&showChangeBtn">
      <van-button type="primary" class="qrcode-btn" @click="onToggleMode({type:0})" v-if="qrcodeMode!==0">生成微信二维码</van-button>
      <van-button type="primary" class="qrcode-btn" @click="onToggleMode({type:1})" v-if="qrcodeMode!==1">生成支付宝二维码</van-button>
      <van-button type="primary" class="qrcode-btn" @click="onToggleMode({type:2})" v-if="qrcodeMode!==2">生成聚合二维码</van-button>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  props: {
    orderId: String,
    isFree: Number,
    areaName: String,
    areaId: String
  },

  data() {
    return {
      qrcodeUrl: '',
      qrcodeName: '',
      qrcodeMode: 2,// 0微信 1支付宝 2聚合码
      showChangeBtn: false
    }
  },

  computed: {
    titleText() {
      if (this.isFree == 0 || this.isFree == 1) {
        return ['(微信)','(支付宝)','(聚合)'][this.qrcodeMode];
      }
      return "";
    },
  },

  mounted() {
    this.refresh();
  },

  methods: {
    refresh() {
      this.getQrcodeData();
    },

    //获取二维码数据
    getQrcodeData() {
      let page = this;
      let value = api.getApp().getAccountValueSync();

      if (page.orderId == null || page.orderId == "") {
        api.toast("未获取订单ID");
        return
      }

      let param = {
        orderIds: page.orderId,
        type: 0,
        userName: value.name,
        url: value.requestUrl,
        enterpriseId: value.linkId,
        roadId: page.areaId,
        roadName: page.areaName
      };
      // 显示切换按钮：测试服务器、建阳、永泰
      // page.showChangeBtn = value.linkId == "119761632728449025" || value.linkId == "77349468608921601"
      //   || value.linkId == "111477211789262849" || value.linkId == "249198894246789121";
      page.showChangeBtn = true;

      if (this.isFree == 0) {
        // if(!page.showChangeBtn) { //如果是需要屏蔽的地区
        //   page.qrcodeMode = 0;
        // }
        page.qrcodeName = "订单二维码";
        param.type = 0;
        param.mode = page.qrcodeMode;// 微信、支付宝、聚合码
      } else if (this.isFree == 1) {
        page.qrcodeName = "追缴二维码";
        param.type = 1;
        param.mode = page.qrcodeMode;
      } else if (this.isFree == 2) {
        page.qrcodeName = "上缴二维码";
        param.type = 2;
        param.mode = 0;
      }

      api.request.postOrderQrcode(true, param).then(function (data) {
        if (page.isFree == 0) {
          if (page.qrcodeMode == 2) {// 聚合码
            api.getApp().getRoadQrCode(data, function (url) {
              page.qrcodeUrl = url;
            });
            return;
          }
          if (page.qrcodeMode == 1) {// 支付宝
            if (typeof data == "string") {
              if (!data.endsWith(".jpg")) {
                data += ".jpg";
              }
            }
            page.qrcodeUrl = data;
            return;
          }
        } else if (page.isFree == 1) {
          if (page.qrcodeMode == 2) {// 聚合码
            api.getApp().getRoadRecoverQrCode(data, function (url) {
              page.qrcodeUrl = url;
            });
            return;
          }
          if (page.qrcodeMode == 1) {// 支付宝
            if (typeof data == "string") {
              if (!data.endsWith(".jpg")) {
                data += ".jpg";
              }
            }
            page.qrcodeUrl = data;
            return;
          }
        }
        page.qrcodeUrl = "data:image/png;base64," + data;
      }).catch(function (reason) {
        api.toast(reason);
      });
    },

    //返回
    navLeftClick() {
      this.$emit("hideMenu");
    },

    //切换支付宝、微信二维码
    onToggleMode({type}) {
      this.qrcodeMode = type;
      this.refresh();
    },

  }
}
</script>

<style>
.qrcode-image {
  margin-top: 1.3rem;
  width: 90%;
  left: 5%;
  display: block;
  position: relative;
}

.qrcode-image:after {
  content: "";
  position: absolute;
  padding-top: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: #f2f2f2;
  z-index: -1;
}

.qrcode-btn-wrap {
  position: absolute;
  bottom: 0.6rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.qrcode-btn {
  margin-top: 0.6rem;
}
</style>